<template>
  <div>
    <h1>hihao1</h1>
    <el-table :data="tableData" style="width: 100%" max-height="250">
      <el-table-column prop="id" label="ID" width="300"> </el-table-column>
      <el-table-column prop="x" label="X值" width="300"> </el-table-column>
      <el-table-column fixed prop="y" label="Y值" width="100">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <!-- {{scope.row.id}} -->
          <el-button
            @click.native.prevent="update_(scope.row)"
            type="text"
            size="small"
          >
            修改
          </el-button>
          <el-button
            @click.native.prevent="delete_(scope.row.id)"
            type="text"
            size="small"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row style="float: right">
      <el-button @click.native.prevent="add()" type="text">新增数据</el-button>
      <el-button @click.native.prevent="removeAll()" type="text"
        >数据清空</el-button
      >
    </el-row>
    <!--    新增弹窗-->
    <el-dialog title="新增数据" :visible.sync="dialogVisible_add" width="30%">
      <el-form ref="form" :model="data" label-width="80px">
        <el-form-item label="x">
          <el-input v-model="data.x"></el-input>
        </el-form-item>
        <el-form-item label="y">
          <el-input v-model="data.y"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_add = false">取 消</el-button>
        <el-button type="primary" @click="save_add">确 定</el-button>
      </span>
    </el-dialog>
    <!--    修改弹窗-->
    <el-dialog title="修改用户" :visible.sync="dialogVisible_up" width="30%">
      <el-form ref="form" :model="data" label-width="80px">
        <el-form-item label="x">
          <el-input v-model="data.x"></el-input>
        </el-form-item>
        <el-form-item label="y">
          <el-input v-model="data.y"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_up = false">取 消</el-button>
        <el-button type="primary" @click="save_up">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
  <script>
import axios from 'axios'

export default {
  data() {
    return {
      tableData: [], // 数据列表
      dialogVisible_add: false, // 新增弹窗控制器
      dialogVisible_up: false, // 新增弹窗控制器
      data: {
        // 数据封装
        x: '',
        y: '',
      },
    }
  },
  created: function () {
    this.loadTableData()
  },
  methods: {
    loadTableData() {
      axios.get('http://localhost:8088/data/queryAll').then((response) => {
        this.tableData = response.data
      })
    },
    update_(row) {
      this.dialogVisible_up = true
      this.user = row
    },
    delete_(id) {
      // console.log(this.user)
      //   const data = JSON.stringify(this.data)
      if (confirm('是否删除此数据？')) {
        axios.get('http://localhost:8088/data/remove?id=' + id).then((response) => {
          console.log(response.status)
          this.loadTableData()
          location.reload(0)
        })
      } else {
        location.reload(0)
      }
    },
    add() {
      this.user = {}
      this.dialogVisible_add = true
    },
    save_add() {
      // 新增
      axios.post('http://localhost:8088/data/add', this.user).then((response) => {
        console.log(response.status)
        this.dialogVisible_add = false
        this.loadTableData()
      })
    },
    save_up() {
      axios.post('http://localhost:8088/data/update', this.user).then((response) => {
        console.log(response.status)
        this.dialogVisible_up = false
        this.loadTableData()
      })
    },
    removeAll() {
      if (confirm('是否全部删除？')) {
        axios.get('http://localhost:8088/data/removeAll').then((response) => {
          console.log(response.status)
          console.log('已全部删除')
        })
      }
      location.reload(0)
    },
  },
}
</script>
  